<template>
  <div class="detail">
    <div class="detail-top">
      <div class="detail-top-img">
        <img :src="data.picture" class="detail-top-imgs"/>
        <div class="detail-top-stutas"></div>
        <div class="detail-top-stutas-div">
          <img class="detail-top-stutas-div-img" src="../../../assets/lamp.png"/>
          <!--<img class="detail-top-stutas-div-img" src="../../../assets/lamp-y.png"/>-->
          正常</div>
      </div>
      <div class="detail-top-name">
        <div class="detail-top-name-title">{{data.tankName}}</div>
        <div class="detail-top-name-tips">
          <div>鱼缸简单介绍</div>
          <div class="line-auto"></div>
          <div>鱼缸介绍</div>
        </div>
        <div class="detail-top-name-con">{{data.intro}}</div>
         <DetailIntroduce v-if="show" :data="data2"></DetailIntroduce>
        <div class="detail-top-name-icon" @click="showChange()">
          <img src="../../../assets/icon-bottom.png" class="detail-top-name-icon-img" v-show="!show"/>
          <img src="../../../assets/icon-bottom.png" class="detail-top-name-icon-img detail-top-name-icon-img-t" v-show="show"/>
        </div>

        <DetailStatus :msg="data.indicators"></DetailStatus>
        <div class="detail-form">
          <div class="detail-form-name">鱼缸报表</div>
          <div class="detail-form-tab">
            <div
            class="detail-form-tab-con"
            v-for="(item, index) in msg2" :key="index"
            :class="{'detail-tab-active': tabIdx2 === index}"
            @click="detailTabChange(index)"
            >
            {{item}}</div>
          </div>
          <div class="detail-form-list">
          <DetailList :tabIdx="tabIdx3" :dataType="dataType" v-on:showChange="showChange2"></DetailList>
          </div>
          <div class="footDiv"></div>
        </div>
      </div>

    </div>

    <FootTab  :tabIdx="tabIdx" v-on:footTabChange="footTabChange"></FootTab>

  </div>
</template>

<script >
import FootTab from '../../../components/footTab.vue'
import DetailStatus from './components/status.vue'
import DetailIntroduce from './components/introduce.vue'
import DetailList from './components/detailList2.vue'
import { getDetail, getDetailCon } from '../../../api/index.js'

export default {
  data () {
    return {
      data: {},
      tabIdx: 0,
      tabIdx2: 0,
      msg2: ['巡查', '喂食', '操作', '生物'],
      show: false,
      show2: [],
      dataType: [],
      tabIdx3: void 0,
      data2: {}
    }
  },

  methods: {
    async getData () {
      const result = await getDetail('a8e986eb-2d28-40cb-bdec-699c199d1e4c')
      this.data = result.data
      let msg = result.data.reports.result

      msg.map(v => {
        let obj = [

          {
            name: '生物',
            msg: [v.biology1, v.biology2, v.biology3]
          },
          {
            name: '设备',
            msg: [v.equipment1, v.equipment2, v.equipment3, v.equipment4]
          }
        ]
        this.show2.push(false)
        v.msg = obj
      })
      this.dataType = msg
      console.log('===>', msg)
    },
    footTabChange (index) {
      this.tabIdx = index
    },
    detailTabChange (index) {
      this.tabIdx2 = index
      this.$router.push({path: '/home/opreationReport', query: {index: index + 1}})
    },
    async showChange () {
      this.show = !this.show
      if (this.show) {
        const result = await getDetailCon('a8e986eb-2d28-40cb-bdec-699c199d1e4c')
        console.log('====>', result.data)
        this.data2 = result.data
      }
    },
    showChange2 (index) {
      if (this.tabIdx3 !== index) {
        this.tabIdx3 = index
      } else {
        this.tabIdx3 = -1
      }

      // debugger
    }
  },
  mounted () {
    this.getData()
  },
  components: {
    FootTab,
    DetailStatus,
    DetailIntroduce,
    DetailList
  }
}
</script>

<style scoped>
.detail{
  /* padding-bottom: 110px; */
}

.detail-top{
  position: relative;
  z-index: 995;
  background: red;
}
.detail-top-img{
  width:750px;
  height:566px;
  position: relative;
}
.detail-top-stutas-div-img{
  width: 51px;
  height: 51px;
  margin-right: 19px;
}
.detail-top-stutas{
  position: absolute;
  z-index: 99;
  right: 0;
  top: 56px;
  background:#000;
  opacity:0.4;
  width: 195px;
  height: 71px;
  border-top-left-radius: 37px;
  border-bottom-left-radius: 37px;
}
.detail-top-stutas-div{
  position: absolute;
  z-index: 999;
  right: 0;
  top: 56px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  width: 195px;
  height: 71px;
  border-top-left-radius: 37px;
  border-bottom-left-radius: 37px;
}
.detail-top-imgs{
  width:100%;
}
.detail-top-name{
  position: absolute;

  top: 414px;
  /* padding: 45px 31px 0px; */
  background: #fff;
  width: 750px;
  border-radius:25px 25px 0px 0px;
}
.detail-top-name-title{
  font-size:38px;
  font-weight: bold;
  color: #000;
  margin-top: 45px;
  margin-left: 35px;
}
.detail-top-name-tips{
  display: flex;
  color: #4d4d4d;
  font-size: 26px;
  margin-top: 22px;
  margin-bottom: 19px;
  margin-top: 45px;
  margin-left: 35px;
}
.line-auto{
  width:2px;
  height:24px;
  background: #e5e5e5;
  margin: 0 21px;
}
.detail-top-name-con{
  font-size: 26px;
  color: #4D4D4D;
  margin-top: 45px;
  margin-left: 35px;
}

.detail-top-name-icon{
  width: 44px;
  margin: 0 auto;
}
.detail-top-name-icon-img{
  width:44px;
  height:11px;
}
.detail-top-name-icon-img-t{
  transform: rotate(180deg);
}
.detail-form{
  padding: 91px 30px 0px;
}
.detail-form-name{
  font-size: 38px;
  color: #202020;
  font-weight: bold;
  margin-bottom: 33px;
  margin-left: 4px;
}
.detail-form-tab{
  display: flex;
  font-size: 28px;
  padding-bottom: 30px;
}
.detail-form-tab-con{
  font-size: 28px;
  border:2px solid #ccc;
  border-radius:30px;
  padding: 17px 30px;
  margin-right: 16px;
  color: #4d4d4d;
}
.detail-tab-active{
  color: #fff;
  background:linear-gradient(35deg,rgba(0,186,255,1),rgba(11,155,238,1));
  border: 2px solid #fff;
}
.detail-form-list{
  border-top:1px solid #e5e5e5 ;
}

.footDiv{
  height: 120px;
  width: 1px;
}
</style>
